<div class="white-warp">
  <h3 class="index-title">小程序制作步骤</h3>
  <div class="steps-warp clearfix">
    <div class="steps-item">
      <div class="steps-round-warp">
        <div class="steps-round">1</div>
        <div class="steps-title">微信小程序注册及认证</div>
        <a class="steps-tips" target="_black" href="https://mp.weixin.qq.com/">（去注册及认证）</a>
      </div>
    </div>
    <div class="steps-item">
      <div class="steps-round-warp">
        <div class="steps-round">2</div>
        <div class="steps-title">创建小程序</div>
      </div>
    </div>
    <div class="steps-item">
      <div class="steps-round-warp">
        <div class="steps-round">3</div>
        <div class="steps-title">上传内容</div>
      </div>
    </div>
    <div class="steps-item">
      <div class="steps-round-warp">
        <div class="steps-round">4</div>
        <div class="steps-title">获取授权并发布</div>
      </div>
    </div>
  </div>
</div>

<div class="">
  <h3 class="index-title">我的小程序</h3>
  <div class="container row clearfix">
    <div class="col-md-3" (click)="addApplet()">
      <div class="applet-item add-applet-item">
        <div class="add-applet-photo">
          <img src="../../../assets/images/add-applet.png" alt="">
        </div>
        <p class="add-applet-title">创建小程序</p>
      </div>
    </div>
    <div class="col-md-3" *ngFor="let item of myAppletList">
      <div class="applet-item">
        <div class="function-group" style="background: url('{{aliyunOssOutputUrl}}{{item.logo}}')">
          <div class="applet-status"
               [ngClass]="{'btn-purple': item.status==='未授权','btn-blue': item.status==='已冻结','btn-green': item.status==='已发布'}">
            {{item.status}}
          </div>
          <div class="function-group-btns">
            <button type="button" class="btn btn-empty" (click)="edit(item.id)">编辑</button>
            <button type="button" class="btn btn-empty" (click)="manege(item)">管理</button>
            <!--<button type="button" class="btn btn-empty btn-gray" (click)="modelCase=1">预览</button>-->
            <button type="button" class="btn btn-empty" (click)="delApplet(item.applet_uuid)">删除</button>
          </div>
        </div>
        <div class="applet-msg-warp">
          <h4 class="applet-type">通用</h4>
          <h4 class="applet-name">{{item.title}}</h4>
          <p class="applet-date">{{item.created_at}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 创建小程序弹框 -->
<div class="modal fade" bsModal #pickModal="bs-modal" tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        创建小程序
        <button type="button" class="close pull-right" aria-label="Close" (click)="pickModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="container-fluid clearfix modal-overflow">
        <form #addAppletForm="ngForm">
          <div class="container-fluid clearfix pick-applet-type-container">
            <div class="col-md-3" *ngFor="let item of appletList" (click)="choseTem(item.id,item.category_id)">
              <div class="pick-applet-type-photo">
                <img src="{{!!item.screenshot?aliyunOssOutputUrl + '/' + item.screenshot:''}}" alt="">
              </div>
              <div class="pick-applet-radio">
                <div class="ui-radio" [class.ui-radioed]="addBase.templateID === item.id"
                     ><i
                  class="iconfont icon-iconfontradiobox"></i><span>{{item.name}}</span>
                  <input type="radio" value="">
                </div>
              </div>
            </div>
            <pagination name="pagination" (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage"
                        previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
            <p [hidden]="hasChoseTem" class="col-xs-12 alert-template alert alert-danger">必须选择模板类型!</p>
          </div>

          <div class="container-fluid clearfix pick-applet-type-container">
            <div class="col-md-5">
              <div class="logo-photo-file">
                <div class="ui-file">
                  <i class="iconfont icon-add"></i>
                  更改LOGO
                  <input class="ui-file-input" type="file" (change)="uploadImg($event,'logo')">
                </div>
                <div class="edvert-photo-warp">
                  <img class="imgSize" src="{{img_url}}">
                </div>
              </div>
              <p [hidden]="hasUpload" class="alert alert-danger auto">请上传logo!</p>
            </div>
            <div class="col-md-7">
              <div class="form-group">
                <label class="form-title">小程序名称</label>
                <input type="text" class="form-control form-content" required name="title" #title="ngModel"
                       [(ngModel)]="addBase.title">
                <p [hidden]="title.pristine || title.valid" class="alert alert-danger">小程序名称不能为空!</p>
              </div>
              <!--<div class="form-group">-->
                <!--<label class="form-title">AppID</label>-->
                <!--<input type="text" class="form-control form-content" required name="AppID" #AppID="ngModel"-->
                       <!--[(ngModel)]="addBase.AppID">-->
                <!--<p [hidden]="AppID.pristine || AppID.valid" class="alert alert-danger">AppID不能为空!</p>-->
              <!--</div>-->
              <!--<div class="form-group">-->
                <!--<label class="form-title">AppSecret</label>-->
                <!--<input type="text" class="form-control form-content" required name="AppSecret" #AppSecret="ngModel"-->
                       <!--[(ngModel)]="addBase.AppSecret">-->
                <!--<p [hidden]="AppSecret.pristine || AppSecret.valid" class="alert alert-danger">AppSecret不能为空!</p>-->
              <!--</div>-->
              <div class="applet-add-tips">
                LOGO用于二维码及登录页面，<br>
                图片只支持jpg、png格式，建议图片尺寸32px*32px
              </div>
            </div>
          </div>
        </form>

        <div class="form-btn-warp">
          <button type="button" class="btn btn-md-long" (click)="pickModal.hide()">取　消</button>
          <button type="submit" class="btn btn-md-long btn-success" [disabled]="!addAppletForm.form.valid||!canClick"
                  (click)="turnPage()">保　存
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 编辑小程序弹框 -->
<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        编辑小程序
        <button type="button" class="close pull-right" aria-label="Close" (click)="editModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="container-fluid clearfix modal-overflow">
        <form #editAppletForm="ngForm">
          <div class="container-fluid clearfix pick-applet-type-container">
            <div class="col-md-3" *ngFor="let item of appletList">
              <div class="pick-applet-type-photo">
                <img src="{{!!item.screenshot?aliyunOssOutputUrl + '/' + item.screenshot:''}}" alt="">
              </div>
              <div class="pick-applet-radio">
                <div class="ui-radio" [class.ui-radioed]="editBase.template_id === item.id"
                ><i
                  class="iconfont icon-iconfontradiobox"></i><span>{{item.name}}</span>
                  <input type="radio" value="">
                </div>
              </div>
            </div>
            <pagination name="pagination" (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" [maxSize]="5"
                        previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
            <p [hidden]="hasChoseTem" class="col-xs-12 alert-template alert alert-danger">必须选择模板类型!</p>
          </div>

          <div class="container-fluid clearfix pick-applet-type-container">
            <div class="col-md-5">
              <div class="logo-photo-file">
                <div class="ui-file">
                  <i class="iconfont icon-add"></i>
                  更改LOGO
                  <input class="ui-file-input" type="file" (change)="uploadImg($event,'logo')">
                </div>
                <div class="edvert-photo-warp">
                  <img class="imgSize" src="{{img_url}}">
                </div>
              </div>
              <p [hidden]="hasUpload" class="alert alert-danger auto">请上传logo!</p>
            </div>
            <div class="col-md-7">
              <div class="form-group">
                <label class="form-title">小程序名称</label>
                <input type="text" class="form-control form-content" required name="title" #title="ngModel"
                       [(ngModel)]="editBase.title">
                <p [hidden]="title.pristine || title.valid" class="alert alert-danger">小程序名称不能为空!</p>
              </div>
              <div class="applet-add-tips">
                LOGO用于二维码及登录页面，<br>
                图片只支持jpg、png格式，建议图片尺寸32px*32px
              </div>
            </div>
          </div>
        </form>

        <div class="form-btn-warp">
          <button type="button" class="btn btn-md-long" (click)="editModal.hide()">取　消</button>
          <button type="submit" class="btn btn-md-long btn-success" [disabled]="!editAppletForm.form.valid||!canClick"
                  (click)="editAppletSubmit()">保　存
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 预览弹框 -->
<!--<div class="model-warp" *ngIf="modelCase!=null">-->
  <!--<div class="overlay" (click)="modelCase=null"></div>-->
  <!--<div class="model">-->
    <!--<div class="model-phone-warp">-->
      <!--<div class="model-swiper">-->
        <!--<img src="../../../assets/images/make-demo01.jpg" alt="" *ngIf="modelCase==1">-->
        <!--<img src="../../../assets/images/make-demo02.jpg" alt="" *ngIf="modelCase==2">-->
        <!--<img src="../../../assets/images/make-demo03.jpg" alt="" *ngIf="modelCase==3">-->
        <!--<img src="../../../assets/images/make-demo04.jpg" alt="" *ngIf="modelCase==4">-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->
<!--</div>-->

<!-- 是否确认删除弹框 -->
<div class="modal fade" bsModal #delModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="delModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        是否确认删除
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="delModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="delAppletSubmit()">确定</button>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
